<!--
 * @Description: 
 * @Author: Sun
 * @Date: 2019-11-22 21:36:30
 * @LastEditors: Sun
 * @LastEditTime: 2019-11-23 14:31:56
 -->
<template>
  <div class="hello">
    <div class="h-ul">
    <select :value="seindex" @input="selectChange($event)"  > 
      <option  v-for="(item,index) in km" :key="index" :value="index"  style="color:#000;">{{item}}</option>
    </select>
    </div>
    <div v-if="seindex==0">
       <indextext/>
    </div>
    <div v-if="seindex==1"> 
       <zh />
    </div>
    <div v-if="seindex==2"> 
       <deom />
    </div>
    <div v-if="seindex==3"> 
       <zt/>
    </div>
   
  </div>
</template>

<script>
// import ECharts from 'vue-echarts'
// import 'echarts/lib/chart/line'
// import 'echarts/lib/component/polar'
import deom from '@/components/deom'
import zt from '@/components/zt'
import zh from '@/components/text/zhu'

import indextext from '@/components/indextext'
export default {

  data () {   
    return {
        km:[
          'deom1',
          '入门示例',
          '柱状图Bar',
          '柱状图zhtu'
        ],
        seindex:0
    }
  },
  methods: {
    selectChange(e){
      this.seindex=e.target.value
    }
  },
  components: {
    // 'v-chart': ECharts,
    zh,
    zt,
    // Bar,
    deom ,
    indextext
  },
}
</script>

<style scoped>
.hello{
  width:100%;
  height:100%;
}
.h-ul{
  border: 1px solid #cccccc;
  width: 400px;
  height: 30px;
  line-height: 16px;
  text-align: center;
}

.echarts {
  width: 100%;
  height: 100%;
}
</style>
